<template>
  <view class="app-community">
    <Navbar :isBack="false">
        <view class="tabs">
            <view class="item" v-for="(item,index) in tabs" @click="handleChangeTabs(index)" :key="index" :class="{active:active==index}">{{ item }}</view>
        </view>
    </Navbar>
    <swiper :current="active" @change="handleChange" class="swiper" :style="mapStyle">
        <swiper-item class="swiper-item">
          <scroll-view class="scrollList" @scrolltolower="handlMoreList" :scroll-y="true">
            <Recommend v-if="active==0" :list="list"></Recommend>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view class="scrollList" @scrolltolower="handlMoreList" :scroll-y="true">
            <Follow v-if="active==1" :list="list"></Follow>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view class="scrollList" @scrolltolower="handlMoreList" :scroll-y="true">
            <Recommend v-if="active==2" :list="list"></Recommend>
          </scroll-view>
        </swiper-item>
    </swiper>
    <img class="postimg" src="/static/community/edit.png" alt="" @click="$gotoUrl('/pages/community/post')">
  </view>
</template>
<script>
import Recommend from './community/recommend.vue'
import Follow from './community/follow.vue'
export default {
  components:{Recommend,Follow},
  data() {
    return {
      tabs:['推荐','关注','同城'],
      pages:{
        pageNum:1,
        pageSize:10
      },
      list:[],
      mapStyle:'',
      active:0
    }
  },
  onLoad(){
    uni.getSystemInfo({
      success: (res) => {
        console.log(res)
        const statusBarHeight = res.statusBarHeight || 0;
        const navBarHeight = statusBarHeight + 44;
        this.mapStyle=`--Height:${res.windowHeight - navBarHeight}px`
      }
    });
  },
  onShow(){
   this.list=[]
   this.pages.pageNum=1
   this.getListData()
  },
  methods: {
    handlMoreList(){
      this.pages.pageNum++
      this.getListData()
    },
    handleChange(e){
      const current=e.detail.current
      this.handleChangeTabs(current)
    },
    handleChangeTabs(index){
      this.active=index
      this.list=[]
      this.pages.pageNum=1
      this.getListData()
    },
    getListData(){
      uni.showLoading({
        mask: true,
        title: '加载中'
      });
      let form={ ...this.pages }
      if(this.active==1){
         form.notAll='1'
      }else if(this.active==2){
         form.sameCity='Y'
      }
      this.$http.post('/business/business/tags/get/page',form).then(res=>{
        res.retObject.list.forEach(x=>x.current=0)
        this.list=this.list.concat(res.retObject.list)
        uni.hideLoading();
      })
    }
  },
  // onPageScroll({ scrollTop }) {
  //   if(scrollTop === 0){
  //     if(this.pages.pageNum>1){
  //       this.pages.pageNum--
  //       this.handleChangeTabs()
  //     }
  //   }
  // },
  // onReachBottom() {
  //   this.pages.pageNum++
  //   this.getListData()
  // },
}
</script>
<style lang="scss" scoped>  
  .swiper{
    height: var(--Height);
    .swiper-item{
      .scrollList{
        height: 100%;
      }
    }
  }
  /deep/ .customNav{
    background-color: #fff;
  }
  .postimg{
    position: fixed;
    right: 30rpx;
    bottom: 96rpx;
    width: 96rpx;
    height: 96rpx;
  }
  .tabs{
    display: flex;
    align-items: center;
    .item{
      font-size: 32rpx;
      font-weight: 400;
      color: #606266;
      position: relative;
      margin-right: 30rpx;
    }
    .item.active{
      font-size: 40rpx;
      font-weight: 500;
      color: #101011;
      &::after{
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: block;
        width: 24rpx;
        height: 8rpx;
        background: #00CC88;
        opacity: 1;
        border-radius:50rpx 50rpx 0 0 
      }
    }
  }
</style>